<template>
    <div class="import-container">
        <!-- 导入月考勤 -->
        <el-tag>
            <i class="el-icon-download" />
            <a :href="'/static/attendance.xlsx'">点击下载模版</a>
        </el-tag>
        <div class="import-panel">
            <el-upload
                ref="upload"
                class="upload-demo"
                drag
                :action="BASE_API+'/attendance/attendance-record/daily/insert'"
                :on-success="fileUploadSuccess"
                :auto-upload="false"
                :on-change="handleUploadChange"
                :file-list="fileList"
                :before-upload="beforeUpload"
                >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text"><el-button slot="trigger" size="small" type="primary">选取文件</el-button></div>
            <div class="el-upload__tip" slot="tip">请根据模板上传文件，只能上传xls/xlsx文件，且不超过1M</div>
            </el-upload>
            <el-button :loading="loading" class="uploadbtn" size="small" type="success" @click="submitUpload">确认上传</el-button>
        </div>
        <div class="table-panel">
            <div class="import-tag">已识别（{{success}}条）</div>
            <el-table
                ref="filterTable"
                :data="tableData"
                style="width: 100%"
                >
            <el-table-column
                prop="id"
                label="序号"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="serviceCorporationName"
                label="劳务公司名称"
                min-width="120px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="teamName"
                label="班组名称"
                min-width="90px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="personName"
                label="姓名"
                align="center"
                >
            </el-table-column>
            <el-table-column
                :filters="datefilter"
                :filter-method="filterHandler"
                prop="date"
                label="日期"
                min-width="90px"
                align="center"
                sortable
                >
            </el-table-column>
            <el-table-column
                prop="startTime"
                label="开始时间"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="endTime"
                label="结束时间"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="total"
                label="合计"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="operation"
                label="操作"
                align="center"
                min-width="90px"
                fixed="right"
                >
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit">调整</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-row class="page">
                <div class="page-tag">
                    共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
                </div>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            success:0,
            BASE_API: process.env.BASE_API, // 接口API地址
            currentPage:1,
            pageSize:10,
            total:0,
            fileList:[],
            corporationfilter:[
                {text:'劳务公司1',value:'劳务公司1'},
                {text:'劳务公司2',value:'劳务公司2'},
            ],
            groupfilter:[
                {text:'班组1',value:'班组1'},
                {text:'班组2',value:'班组2'},
            ],
            datefilter:[
                {text:'2021-07-07',value:'2021-07-07'},
                {text:'2021-07-08',value:'2021-07-08'},
            ],
            tableData:[],
            loading:false
        }
    },
    methods:{
        fileUploadSuccess(res){
            if (res.success === true) {
                this.loading = false;
                this.$message({
                    type: "success",
                    message: "上传成功"
                });
                this.tableData = res.data.data
                this.success = res.data.success
            }
        },
        submitUpload(){
            this.importBtnDisabled = true;
            this.loading = true;
            $refs.upload.submit();
        },
        beforeUpload(file){
            const fileType = file.name.substring(file.name.lastIndexOf('.'))
            if (fileType.toLowerCase() != '.xls' && fileType.toLowerCase() != '.xlsx') {
                this.$message.error('文件必须为.xls或.xlsx类型')
                this.fileList = []
                return false
            }
        },
        uploadRequest(param){
            console.log(param);
            
            // axios({
            //     method: 'post',
            //     url: 'http://localhost:8081/Attendance/readExcel',
            //     headers: {
            //         'Content-Type': 'multipart/form-data'
            //     },
            //     // data:form
            // }).then(res=>{
            //     console.log(res);
            // })
        },
         // 限制文件上传的个数只有一个，获取上传列表的最后一个
        handleUploadChange(file, fileList) {
            if (fileList.length > 0) {
                this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的文件
            }
        },
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(){},
        handleCurrentChange(){},
        //filter
        filterTag(value, row) {
            return row.tag === value;
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        }
        
    }
}
</script>

<style scoped lang="scss">

</style>